<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	</head>
	<body>
		<div id="app" style="overflow: hidden;">
			<!-- 添加客户 -->
			<el-dialog :visible.sync="visible1" title="添加客户" width="30%">
			  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
			    <el-form-item label="身份证号" prop="identity">
			      <el-input v-model="ruleForm.identity"></el-input>
			    </el-form-item>
				<el-form-item label="客户姓名" prop="custname">
				  <el-input v-model="ruleForm.custname"></el-input>
				</el-form-item>
				<el-form-item label="性别" prop="sex">
				  <el-radio v-model="ruleForm.sex" label="1">男</el-radio>
				  <el-radio v-model="ruleForm.sex" label="0">女</el-radio>
				</el-form-item>
				<el-form-item label="地址" prop="address">
				  <el-input v-model="ruleForm.address"></el-input>
				</el-form-item>
			    <el-form-item label="联系电话" prop="phone">
			      <el-input v-model="ruleForm.phone"></el-input>
			    </el-form-item>
				<el-form-item label="职业" prop="career">
				  <el-input v-model="ruleForm.career"></el-input>
				</el-form-item>
				<el-form-item>
				  <el-button type="primary" @click="addForm('ruleForm')">立即创建</el-button>
				  <el-button @click="resetForm('ruleForm')">重置</el-button>
				</el-form-item>
			  </el-form>
			</el-dialog>
			
			<!-- 编辑客户 -->
			<el-dialog :visible.sync="visible2" title="编辑客户" width="30%">
			  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
			    <el-form-item label="身份证号" prop="identity">
			      <el-input v-model="ruleForm.identity" readOnly></el-input>
			    </el-form-item>
				<el-form-item label="客户姓名" prop="custname">
				  <el-input v-model="ruleForm.custname"></el-input>
				</el-form-item>
				<el-form-item label="性别" prop="sex">
				  <el-radio v-model="ruleForm.sex" label="1">男</el-radio>
				  <el-radio v-model="ruleForm.sex" label="0">女</el-radio>
				</el-form-item>
				<el-form-item label="地址" prop="address">
				  <el-input v-model="ruleForm.address"></el-input>
				</el-form-item>
			    <el-form-item label="联系电话" prop="phone">
			      <el-input v-model="ruleForm.phone"></el-input>
			    </el-form-item>
				<el-form-item label="职业" prop="career">
				  <el-input v-model="ruleForm.career"></el-input>
				</el-form-item>
			   <el-form-item>
			     <el-button type="primary" @click="editForm('ruleForm')">立即编辑</el-button>
			   </el-form-item>
			  </el-form>
			</el-dialog>
			
			<div style="margin-top: 60px;margin-left:80px;border: 0px solid red;" >
					<el-form :model="searchRuleForm" ref="searchRuleForm" label-width="100px" class="demo-ruleForm">
						<el-form-item prop="custname" label="姓名：" style="margin-left: -45px;">
							<el-input v-model="searchRuleForm.custname" placeholder="请输入客户姓名" style="width: 230px;float: left"></el-input>
						</el-form-item>
						<el-form-item prop="identity" label="身份证号：" style="position: relative;top: -63px;left: 300px;">
							<el-input v-model="searchRuleForm.identity" placeholder="请输入身份证号" style="width: 230px;float: left"></el-input>
							<el-button type="primary" icon="el-icon-search" style="float: left;position: relative;left: 20px;" @click="submitForm()">搜索</el-button>
							<el-button type="warning" icon="el-icon-refresh-right" style="position: relative;left: 22px;" @click="resetForm('searchRuleForm')">重置</el-button>
							<el-button type="success" icon="el-icon-folder-add" style="position: relative;left: 20px;" @click="add()">添加</el-button>
						</el-form-item>
					</el-form>
					<el-table
						:data="tableData"
						border
						stripe
						style="width: 100%;position: relative;top: -60px;">
					<el-table-column
							fixed
							prop="identity"
							label="身份证号"
							width="200">
					</el-table-column>
					<el-table-column
							prop="custname"
							label="姓名"
							width="100">
					</el-table-column>
					<el-table-column
							label="性别"
							width="80">
							<template slot-scope="scope">
						　　　　<font v-if="scope.row.sex == 0">女</font>
							   <font  v-if="scope.row.sex == 1">男</font>
						　　</template>
					</el-table-column>
					<el-table-column
							prop="address"
							label="地址"
							width="100">
					</el-table-column>
					<el-table-column
							prop="phone"
							label="联系电话"
							width="150">
					</el-table-column>
					<el-table-column
							prop="career"
							label="职业"
							width="150">
					</el-table-column>
					<el-table-column
							prop="createtime"
							label="创建时间"
							width="200">
					</el-table-column>
					<el-table-column label="操作">
						<template slot-scope="scope">
							<el-button
									size="mini"
									type="primary"
									icon="el-icon-edit"
									@click="edit(scope.row)">编辑</el-button>
							<el-button
									size="mini"
									type="danger"
									icon="el-icon-delete"
									@click="del(scope.row)">删除</el-button>
						</template>
					</el-table-column>
					</el-table>
					<el-pagination style="margin-top: 20px;float: right;position: relative;top: -60px;"
								   background
								   layout="prev, pager, next"
								   :page-size="pageSize"
								   :total="total"
								   :current-page.sync="currentPage"
								   @current-change="page">
					</el-pagination>
			</div>
		</div>
	</body>
	<script src="js/vue.js"></script>
	<script src="js/elementui.js"></script>
	<script src="js/jquery-3.3.1.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
	<script>
	  new Vue({
		el: '#app',
		data() {
			return {
				tableData:null,
				pageSize:5,
				total:null,
				currentPage:1,
				searchRuleForm: {
				  custname:'',
				  identity:''
				},
				ruleForm: {
				  identity:'',
				  custname:'',
				  sex:'0',
				  address:'',
				  phone:'',
				  career:''
				},
				rules: {
				  identity: [{required: true, message: '请输入身份证号', trigger: 'blur'}],
				  custname: [{required: true, message: '请输入客户姓名', trigger: 'blur'}],
				  address: [{required: true, message: '请输入地址', trigger: 'blur'}],
				  phone: [{required: true, message: '请输入联系电话', trigger: 'blur'}],
				  career: [{required: true, message: '请输入职业', trigger: 'blur'}]
				},
				visible1:false,
				visible2:false
			}
		},
		methods:{
			add(){
				this.visible1 = true
			},
			addForm(formName) {
				this.$refs[formName].validate((valid) => {
				  if (valid) {
					let _this = this
					axios.post('http://localhost:8181/customer/add',_this.ruleForm).then(function (response) {
						if(response.data.code == 0){
							_this.$alert('客户【'+_this.ruleForm.custname+'】添加成功', '', {
								confirmButtonText: '确定',
								callback: action => {
									location.reload()
								}
							});
						} else {
							_this.$alert(response.data.msg, '提示', {
								confirmButtonText: '确定'
							});
						}
					})
				  } else {
					console.log('error submit!!');
					return false;
				  }
				});
			  },
			resetForm(formName) {
			  this.$refs[formName].resetFields();
			},
			submitForm() {
				const _this = this
				//让翻页复原
				_this.currentPage=1
				axios.get('http://localhost:8181/customer/list?custname='+_this.searchRuleForm.custname+'&identity='+_this.searchRuleForm.identity+'&page='+_this.currentPage+'&limit='+_this.pageSize).then(function (resp) {
					_this.tableData = resp.data.data
					_this.total = resp.data.count
				})
			},
			page(currentPage){
				const _this = this
				axios.get('http://localhost:8181/customer/list?custname='+_this.searchRuleForm.custname+'&identity='+_this.searchRuleForm.identity+'&page='+currentPage+'&limit='+_this.pageSize).then(function (resp) {
					_this.tableData = resp.data.data
					_this.total = resp.data.count
				})
			},
			edit(row){
				this.visible2 = true
				this.ruleForm.identity = row.identity
				this.ruleForm.custname = row.custname
				this.ruleForm.sex = row.sex+''
				this.ruleForm.address = row.address
				this.ruleForm.phone = row.phone
				this.ruleForm.career = row.career
			},
			editForm(formName) {
				this.$refs[formName].validate((valid) => {
				  if (valid) {
					let _this = this
					axios.post('http://localhost:8181/customer/update',_this.ruleForm).then(function (response) {
						if(response.data.code == 0){
							_this.$alert('客户【'+_this.ruleForm.custname+'】编辑成功', '', {
								confirmButtonText: '确定',
								callback: action => {
									location.reload()
								}
							});
						} else {
							_this.$alert(response.data.msg, '提示', {
								confirmButtonText: '确定'
							});
						}
					})
				  } else {
					console.log('error submit!!');
					return false;
				  }
				});
			  },
			del(row) {
				const _this = this
				this.$confirm('确认删除【'+row.custname+'】吗？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					axios.delete('http://localhost:8181/customer/delete?identity='+row.identity).then(function (resp) {
						if(resp.data.code==0){
							_this.$alert('【'+row.custname+'】已删除', '', {
								confirmButtonText: '确定',
								callback: action => {
									location.reload()
								}
							});
						}
					});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			}
		},
		created() {
			const _this = this
			axios.get('http://localhost:8181/customer/list').then(function (resp) {
				_this.tableData = resp.data.data
				_this.total = resp.data.count
			})
		}
	  })
	</script>
		
	<style>
	    .home_container {
	        height: 100%;
	        position: absolute;
	        top: 0px;
	        left: 0px;
	        width: 100%;
	    }
	
	    .el-header {
	        background-color: #20a0ff;
	        color: #333;
	        text-align: center;
	        display: flex;
	        align-items: center;
	        justify-content: space-between;
	    }
	
	    .el-aside {
	        background-color: #ECECEC;
	    }
	
	    .el-main {
	        background-color: #fff;
	        color: #000;
	        text-align: center;
	    }
	
	    .el-footer {
	        background-color: #ea7e53;
	        color: #fff;
	        font-size: 22px;
	        line-height: 60px;
			text-align: center;
	    }
	
	    .home_title {
	        color: #fff;
	        font-size: 22px;
	        display: inline;
	    }
	
	    .home_userinfo {
	        color: #fff;
	        cursor: pointer;
	    }
	
	    .home_userinfoContainer {
	        display: inline;
	        margin-right: 20px;
	    }
	</style>
</html>
